<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="serchForm" :model="form" :style="{ width: '100%' }">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="userName" hide-label>
                    <a-input v-model="form.userName" placeholder="请输入客户账号" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="state" hide-label>
                    <a-select v-model="form.state" placeholder="请选择客户状态" allow-clear>
                      <a-option value="0">正常</a-option>
                      <a-option value="1">关闭</a-option>
                      <!-- <a-option value="2">离职</a-option> -->
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="realName" hide-label>
                    <a-select v-model="form.realName" placeholder="请选择实名状态" allow-clear>
                      <a-option value="-1">未实名</a-option>
                      <a-option value="0">已实名</a-option>
                      <a-option value="1">待审核</a-option>
                      <a-option value="2">已失败</a-option>
                      <a-option value="3">已驳回</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="warningState" hide-label>
                    <a-select
                      v-model="form.warningState"
                      placeholder="请选择余额预警状态"
                      allow-clear
                    >
                      <a-option value="1">已开启</a-option>
                      <a-option value="0">未开启</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addBalance" hide-label>
                    <a-input-group>
                      <a-input v-model="form.addBalance" placeholder="开始余额" allow-clear />
                      <a-input v-model="form.endBalance" placeholder="结束余额" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button type="primary" html-type="submit" @click="doRefresh(1)"
                        ><template #icon>
                          <icon-search />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>搜索</template></a-button
                      >
                      <a-button @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button type="primary" @click="showAdd">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>新建</template>
          </a-button>
          <a-button type="outline" status="warning" :loading="loading" @click="exportDepartments">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>导出</template>
          </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :loading="tableLoading"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :row-class-name="rowClassNameFun"
          :data="table.dataList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          table-layout-fixed
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          :scroll="{ x: 1500 }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'userRealName'" #cell="{ record }">
                <a-tag color="blue" v-if="record.realName == 0">已实名 </a-tag>
                <a-tag v-else-if="record.realName == 1">待审核 </a-tag>
                <a-tag color="red" v-else-if="record.realName == 2">已失败 </a-tag>
                <a-tag color="red" v-else-if="record.realName == 3">已驳回 </a-tag>
                <a-tag v-else>未实名 </a-tag>
              </template>
              <template v-else-if="item.key === 'warningBalance'" #cell="{ record }">
                <span v-if="record.warningBalance">
                  <a-button style="padding: 0px 4px" type="text" size="small"> 已开启</a-button>
                </span>
                <span v-else>
                  <a-button style="padding: 0px 4px" type="text" size="small">未开启</a-button>
                </span>
              </template>
              <template v-else-if="item.key === 'gender'" #cell="{ record }">
                {{ record.gender === 1 ? '男' : '女' }}
              </template>
              <template v-else-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="blue" v-if="record.state === 0">正常</a-tag>
                <a-tag color="red" v-else-if="record.state === 1">关闭</a-tag>
                <!-- <a-tag color="red" size="small" v-else>离职</a-tag> -->
              </template>
              <template v-else-if="item.key === 'balance'" #cell="{ record }">
                {{ '￥' + record.balance }}
              </template>
              <template v-else-if="item.key === 'activation'" #cell="{ record }">
                {{ record.cardStatistics.activation }}张
              </template>
              <template v-else-if="item.key === 'total'" #cell="{ record }">
                {{ record.cardStatistics.total }}张
              </template>
              <template v-else-if="item.key === 'print'" #cell="{ record }">
                <span v-if="record.cardStatistics.activation > 0">
                  {{
                    Math.floor(
                      (record.cardStatistics.activation / record.cardStatistics.total) * 100 * 100
                    ) / 100
                  }}%</span
                >
                <span v-else> 0% </span>
              </template>

              <template v-else-if="item.key === 'sessions'" #cell="{ record }">
                <a-button
                  style="padding: 0px 4px"
                  type="text"
                  @click="clickT(record.sessions)"
                  size="small"
                >
                  {{ record.sessions.length }}&nbsp;台</a-button
                >
              </template>
              <template v-else-if="item.key === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="showfenrun(record)"
                    >分润</a-button
                  >
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="delimitation(record)"
                    >分销</a-button
                  >
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="openGoodProfit(record)"
                    >商城</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <div
          style="
            border: 1px solid rgba(229, 231, 235, var(--tw-border-opacity));
            border-top: 0;
            padding: 12px;
            text-align: left;
          "
          >统计：账户余额:{{ totals.amount }}元
        </div>
      </template>
      <template #footer>
        <TableFooter :pagination="pagination" position="center" />
      </template>
    </TableBody>
    <a-modal
      v-model:visible="fenrunvisible"
      @before-close="fenrunvisible = false"
      title="客户分润"
      width="1000px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="serchForm2" :model="fenrunForm" :style="{ width: '100%' }">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item field="channelId" hide-label>
              <a-select v-model="fenrunForm.channelId" placeholder="请选择渠道" allow-clear>
                <a-option v-for="item in channel" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="seriesId" hide-label>
              <a-select v-model="fenrunForm.seriesId" placeholder="请选择系列" allow-clear>
                <a-option v-for="item in series" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="state" hide-label>
              <a-select v-model="fenrunForm.type" placeholder="请选择套餐类型" allow-clear>
                <a-option value="0">无限叠加</a-option>
                <a-option value="1">基础套餐</a-option>
                <a-option value="2">叠加包</a-option>
                <!-- <a-option value="3">体验包</a-option> -->
                <!-- <a-option value="2">离职</a-option> -->
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="state" hide-label>
              <a-select v-model="fenrunForm.profit" placeholder="请选择分润状态" allow-clear>
                <a-option :value="1">已分润</a-option>
                <a-option :value="0">未分润</a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-spin :loading="classLoading" tip="加载中····" style="width: 100%">
        <a-table
          :bordered="{ wrapper: tables.bordered, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :row-class-name="rowClassNameFun"
          :data="table2.dataList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          table-layout-fixed
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumnsfenrunList.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :data-index="(item.key as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    :key="record"
                    @click="showUpdateFenrun(record)"
                    >编辑</a-button
                  >
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    status="warning"
                    @click="resetFenrun(record)"
                    >回收</a-button
                  >
                </a-space>
              </template>
              <template v-else-if="item.key === 'usercost'" #cell="{ record }">
                <span v-if="record.setMealUser">{{ record.setMealUser.cost }}元</span>
                <span v-else>未分润</span>
              </template>
              <template v-else-if="item.key === 'userprice'" #cell="{ record }">
                <span v-if="record.setMealUser">{{ record.setMealUser.price }}元</span>
                <span v-else>未分润</span>
              </template>
              <template v-else-if="item.key === 'price'" #cell="{ record }">
                <span>{{ record.price }}元</span>
              </template>
              <template v-else-if="item.key === 'cost'" #cell="{ record }">
                <span>{{ record.cost }}元</span>
              </template>

              <template v-else-if="item.key === 'close'" #cell="{ record }">
                <span v-if="record.setMealUser">
                  <a-tag color="red" v-if="record.setMealUser.close == true">关闭</a-tag>
                  <a-tag color="blue" v-else-if="record.setMealUser.close == false"
                    >正常</a-tag
                  ></span
                >
                <span v-else> <a-tag>未分润</a-tag></span>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="pagination2" position="center" />
      </a-spin>
      <template #footer>
        <a-space style="width: 100%; display: flex; justify-content: space-between">
          <div>
            <span style="margin-right: 20px">分润方案</span>
            <a-radio-group v-model="checkFenrunType" @change="changeType">
              <a-radio :value="0">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">成本分润</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="1">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">个性分润</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </div>
          <div v-if="checkFenrunType == 0">
            <a-input-number
              hide-button
              :style="{ width: '320px' }"
              v-model="type0Num"
              placeholder="请输入分润比例"
              allow-clear
            >
              <template #append>
                <a-button type="primary" status="success" @click="fuzhuClick">辅助计算</a-button>
              </template>
            </a-input-number>
            <a-button type="primary" style="margin-left: 12px" @click="submitFenrunList"
              >确认分润</a-button
            >
          </div>
          <div v-else>
            <a-input-number
              hide-button
              :style="{ width: '450px' }"
              placeholder="请输入金额"
              v-model="type0Num"
              allow-clear
            >
              <template #prepend>
                <a-select v-model="gexingFenrunType" placeholder="请选择客户状态">
                  <a-option :value="0">系统成本+金额=客户成本</a-option>
                  <a-option :value="1">系统售价-金额=客户成本</a-option>
                  <a-option :value="2" v-if="fenrunForm.profit == 1"
                    >客户成本+金额=客户成本</a-option
                  >
                </a-select>
              </template>
              <template #append>
                <a-button type="primary" status="success" @click="fuzhuClick">辅助计算</a-button>
              </template>
            </a-input-number>
            <a-button type="primary" style="margin-left: 12px" @click="submitFenrunList"
              >确认分润</a-button
            >
          </div>
          <!-- <a-button @click="handleCancelsb">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkBansb">确定</a-button> -->
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="visible"
      @before-close="handleCancel"
      title="添加客户"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="userForm" :auto-label-width="true" :model="subForm">
        <a-form-item
          label="登录账号"
          field="userName"
          asterisk-position="end"
          :rules="[{ required: true, message: '登录账号不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-textarea v-model="subForm.userName" placeholder="请输入客户登录账号" allow-clear />
          <template #extra>
            <div
              >需要一次新建多个客户的，请一行一个输入客户登录账号,<span
                style="color: #3491fa; cursor: pointer"
                @click="userdetectFn"
                >点此立即检测账号</span
              ></div
            >
          </template>
        </a-form-item>
        <a-form-item label="登录密码" field="passWordmd5">
          <a-input
            v-model.trim="subForm.passWordmd5"
            placeholder="请输入客户登录密码，不填默认123456"
            allow-clear
          >
            <template #suffix>
              <span @click="clickSj" style="color: rgb(var(--primary-6)); cursor: pointer"
                >随机密码</span
              >
            </template>
          </a-input>
          <template #extra>
            <div>不填密码则密码默认为123456</div>
          </template>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleBeforeOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="visibleEdit"
      @before-close="handleCancelEdit"
      title="编辑客户信息"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="userFormEdit" :auto-label-width="true" :model="subFormEdit">
        <a-form-item
          label="登录账号"
          field="userName"
          :rules="[
            { required: true, message: '登录账号不能为空' },
            { minLength: 1, maxLength: 15, message: '登录账号必须小于15个字符' },
          ]"
          :validate-trigger="['change', 'input']"
        >
          <a-input
            v-model.trim="subFormEdit.userName"
            placeholder="请输入客户登录账号"
            allow-clear
          />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelEdit">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkEdit">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="balancevisible"
      @before-close="handleCancelBan"
      title="充值余额"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="balanceForms" :auto-label-width="true" :model="banlanceForm">
        <a-form-item field="type" label="充值类型">
          <a-radio-group v-model="banlanceForm.type">
            <a-radio value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">加款</div>
                </div>
              </template>
            </a-radio>
            <a-radio value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">扣款</div>
                </div>
              </template>
            </a-radio>
            <a-radio value="2">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">最终金额</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          field="balance"
          label="充值金额"
          :rules="[{ required: true, message: '充值金额不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input-number v-model="banlanceForm.balance" placeholder="输入充值金额" allow-clear />
        </a-form-item>
        <a-form-item field="remarks" label="备注">
          <a-textarea v-model="banlanceForm.remarks" placeholder="请输入备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelBan">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkBan">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="ziliaovisible"
      @before-close="handleCancelZiliao"
      width="800px"
      title="客户资料"
      :mask-closable="false"
      title-align="start"
    >
      <a-spin :loading="loadingziliao" tip="加载中····" style="width: 100%">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" title="基本信息">
            <a-scrollbar style="height: 600px; overflow: auto">
              <a-descriptions
                :column="2"
                bordered
                :label-style="{ color: 'black' }"
                :value-style="{ height: 200 }"
              >
                <a-descriptions-item label="客户ID"> {{ userInfos.id }} </a-descriptions-item>
                <a-descriptions-item label="客户账号">
                  {{ userInfos.userName }}
                </a-descriptions-item>
                <a-descriptions-item label="客户等级"> {{ userInfos.grade }} </a-descriptions-item>
                <a-descriptions-item label="账户余额">
                  {{ userInfos.userName }}
                </a-descriptions-item>
                <a-descriptions-item :span="2">
                  <template #label>
                    <span style="height: 200px; display: inline-block; line-height: 200px"
                      >单列数据</span
                    >
                  </template>
                  <div style="height: 200px">{{ userInfos.id }}</div>
                </a-descriptions-item>
                <a-descriptions-item :span="2">
                  <template #label>
                    <span style="height: 200px; display: inline-block; line-height: 200px"
                      >单列数据</span
                    >
                  </template>
                  <div style="height: 200px">{{ userInfos.id }}</div>
                </a-descriptions-item>
              </a-descriptions>
            </a-scrollbar>
          </a-tab-pane>
          <a-tab-pane key="2" title="实名信息"
            ><a-scrollbar style="height: 600px; overflow: auto"> 1111</a-scrollbar></a-tab-pane
          >
          <a-tab-pane key="3">
            <template #title>接口对接</template>
            <a-scrollbar style="height: 600px; overflow: auto"> 1111</a-scrollbar>
          </a-tab-pane>
        </a-tabs>
      </a-spin>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelZiliao">取消</a-button>
          <a-button type="primary" @click="handleCancelZiliao">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="warvisible"
      @before-close="handleCancelWar"
      title="余额预警"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="setForms" :auto-label-width="true" :model="warForm">
        <a-form-item
          field="warningBalance"
          label="预警金额"
          :rules="[{ required: true, message: '预警金额不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input-number v-model="warForm.warningBalance" placeholder="输入预警金额" allow-clear />
        </a-form-item>
        <a-form-item
          field="warningPhone"
          label="手机号"
          :rules="[
            { required: true, message: '手机号码不能为空' },
            { minLength: 11, message: '手机号码必须为11位' },
          ]"
        >
          <a-input v-model="warForm.warningPhone" placeholder="输入预警手机号" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelWar">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkWar">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="updateFenrunisible"
      @before-close="handleCancelUpdateFenrun"
      title="编辑分润"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="updateFenrunForms" :auto-label-width="true" :model="fenrunUpdateForm">
        <a-form-item
          field="cost"
          label="客户成本"
          :rules="[{ required: true, message: '客户成本不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input-number
            v-model="fenrunUpdateForm.cost"
            placeholder="请输入客户成本"
            allow-clear
          />
        </a-form-item>
        <a-form-item
          field="price"
          label="客户售价"
          :rules="[{ required: true, message: '客户售价不能为空' }]"
        >
          <a-input-number
            v-model="fenrunUpdateForm.price"
            placeholder="请输入客户售价"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="close" label="套餐状态">
          <a-radio-group class="radio-bcg" v-model="fenrunUpdateForm.close">
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelUpdateFenrun">取消</a-button>
          <a-button type="primary" @click="submitUpdateFenrun">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="passvisible"
      @before-close="handleCancelPass"
      title="修改密码"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="passForms" :auto-label-width="true" :model="passForm">
        <a-form-item
          field="passWordmd5"
          label="新密码"
          :rules="[{ required: true, message: '新密码不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model="passForm.passWordmd5" placeholder="请输入新密码" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelPass">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkPass">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="statevisible"
      @before-close="handleCancelstate"
      title="修改状态"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="passForms" :auto-label-width="true" :model="stateForm">
        <a-form-item field="state" label="用户状态">
          <a-select v-model="stateForm.state" placeholder="请选择客户状态">
            <a-option :value="0">正常</a-option>
            <a-option :value="1">关闭</a-option>
            <!-- <a-option :value="2">离职</a-option> -->
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelstate">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkstate">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="shebeivisible"
      @before-close="handleCancelsb"
      title="在线设备"
      width="880px"
      :mask-closable="false"
      title-align="start"
    >
      <a-table
        :bordered="{ wrapper: tables.bordered, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)"
        :row-class-name="rowClassNameFun"
        :data="sessionList"
        :pagination="false"
        :column-resizable="true"
        :rowKey="rowKey"
        table-layout-fixed
        :tooltip="true"
      >
        <template #columns>
          <a-table-column
            v-for="item of sessionColumns"
            :key="item.key"
            align="left"
            :ellipsis="true"
            :tooltip="true"
            :width="item.width"
            :title="(item.title as string)"
            :data-index="(item.key as string)"
          >
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <a-space :size="2">
                <a-button
                  style="padding: 0px 4px"
                  type="text"
                  status="danger"
                  @click="ouLine(record)"
                  size="small"
                >
                  下线
                </a-button>
              </a-space>
            </template>
            <template v-else-if="item.key === 'status'" #cell="{ record }">
              <a-tag color="blue" v-if="record.state === 0">正常</a-tag>
              <a-tag color="red" v-else-if="record.state === 1">关闭</a-tag>
              <!-- <a-tag color="red"  v-else>离职</a-tag> -->
            </template>
          </a-table-column>
        </template>
      </a-table>
      <template #footer>
        <a-space>
          <!-- <a-button @click="handleCancelsb">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkBansb">确定</a-button> -->
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="huakavisible"
      @before-close="handleCancelhuaka"
      title="分销操作"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="huakaForms" :model="huakaForm" :auto-label-width="true">
        <a-form-item label="分销卡号" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="orderly" />
            </a-col>
            <a-col :span="10">
              <a-form-item
                hide-asterisk
                field="addCard"
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入开始卡号' },
                ]"
                no-style
              >
                <a-input
                  v-model="huakaForm.addCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入开始卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
            </a-col>
            <a-col :span="10">
              <a-form-item
                field="endCard"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入结束卡号' },
                ]"
                no-style
              >
                <a-input
                  v-model="huakaForm.endCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入结束卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="cardMultiline"
          :content-flex="false"
          hide-asterisk
          :merge-props="false"
          :rules="[{ required: checked1 == 'disOrder' ? true : false, message: '卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="disOrder" />
            </a-col>
            <a-col :span="22">
              <a-textarea
                :auto-size="{
                  minRows: 10,
                }"
                v-model="huakaForm.cardMultiline"
                :disabled="checked1 == 'disOrder' ? false : true"
                placeholder="请输入卡号，一行一个"
                allow-clear
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="remarks"
          label="分销备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
        >
          <a-row :gutter="24">
            <a-col :span="2" />

            <a-col :span="22">
              <a-input v-model="huakaForm.remarks" placeholder="请输入分销备注" allow-clear />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <a-divider type="dashed" :margin="20">常见问题</a-divider>
      <a-collapse>
        <a-collapse-item header="为什么会有不可分销卡号，具体是什么意思？" key="1">
          <div>1：不可分销卡号指的卡号是已经分销给下级客户 </div>
          <div>2：解决方法：将不可分销的卡号进行回收操作，再次分销就可以分销了</div>
        </a-collapse-item>
      </a-collapse>
      <template #footer>
        <a-space>
          <a-button @click="handleBeforeOkhuakas">检测</a-button>
          <a-button type="primary" @click="handleBeforeOkhuaka">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="jiancevisible"
      @before-close="jiancevisible = false"
      title="检测结果"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <p style="text-align: center; font-size: 16px">分销卡号数据： </p>
      <p style="text-align: center; margin-top: 20px; font-size: 16px"
        >总分销卡号：<span style="color: #3491fa">{{ jianceForm.total }}张</span>，可分销卡号：<span
          style="color: #3491fa"
          >{{ jianceForm.success }}张</span
        >，不可分销卡号：<span style="color: #3491fa">{{ jianceForm.error }}张</span></p
      >
    </a-modal>
    <!-- 检测结果 -->
    <a-modal
      v-model:visible="aaaas"
      @before-close="aaaas = false"
      title="检测结果"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <p style="text-align: center; font-size: 16px">新建账户数据： </p>
      <p style="text-align: center; margin-top: 20px; font-size: 16px"
        >总数量：<span style="color: #3491fa">{{ userZong.total }}张</span>，可新建数量：<span
          style="color: #3491fa"
          >{{ userZong.success }}个</span
        >，不可新建数量：<span style="color: #3491fa">{{ userZong.error }}个</span></p
      >
      <a-alert style="margin-top: 20px" type="error" :show-icon="false">
        <div style="text-align: center; font-size: 13px; color: #f53f3f">
          不可新建的账号是因为账号重复，请仔细检查账号</div
        >
      </a-alert>
    </a-modal>
    <!-- 分润列表 -->
    <a-modal
      v-model:visible="goodProfitVisible"
      @before-close="goodProfitVisible = false"
      title="分润列表"
      width="1100px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form :auto-label-width="true" :model="goodProfitInfo">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item field="mallName" hide-label>
              <a-input
                v-model="goodProfitInfo.mallName"
                class="width100"
                placeholder="请输入商品名称"
                allow-clear
                @change="changeStockSeachs"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="classId" hide-label>
              <a-select
                v-model="goodProfitInfo.classId"
                class="width100"
                placeholder="请选择商品分类"
                allow-clear
                @change="changeStockSeachs"
              >
                <a-option v-for="item in classLists" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="profitSharing" hide-label>
              <a-select
                v-model="goodProfitInfo.profitSharing"
                placeholder="请选择分润状态"
                allow-clear
                class="width100"
                @change="changeStockSeachs"
              >
                <a-option :value="1">已分润</a-option>
                <a-option :value="0">未分润</a-option>
                <!-- <a-option value="2">离职</a-option> -->
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="operatorId" hide-label>
              <a-select
                class="width100"
                v-model="goodProfitInfo.operatorId"
                placeholder="请选择运营商"
                allow-clear
                @change="changeStockSeachs"
              >
                <a-option :value="0">中国移动</a-option>
                <a-option :value="1">中国联通</a-option>
                <a-option :value="2">中国电信</a-option>
                <a-option :value="3">中国广电</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="commissionRule" hide-label>
              <a-select
                class="width100"
                v-model="goodProfitInfo.commissionRule"
                placeholder="请选择佣金规则"
                allow-clear
                @change="changeStockSeachs"
              >
                <a-option :value="0">秒返</a-option>
                <a-option :value="1">次月底返</a-option>
                <a-option :value="2">月月返</a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        :loading="goodProfitLoading"
        :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)"
        :row-class-name="rowClassNameFun"
        :data="goodProfitList"
        :pagination="false"
        :column-resizable="true"
        :rowKey="rowKey"
        table-layout-fixed
        :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
        :selected-keys="fuzhufenrunlist111"
        :row-selection="{
          type: 'checkbox',
          showCheckedAll: true,
        }"
        @selection-change="selecFn"
      >
        <template #columns>
          <a-table-column
            v-for="item of goodProfitTableList"
            :key="item.key"
            align="left"
            :width="item.width"
            :title="(item.title as string)"
            :data-index="(item.key as string)"
            :ellipsis="true"
            :tooltip="true"
            :fixed="item.fixed"
          >
            <template v-if="item.key === 'commissionRule'" #cell="{ record }">
              <a-space style="display: flex; flex-wrap: wrap">
                {{
                  record.commissionRule == 0
                    ? '秒返'
                    : record.commissionRule == 1
                    ? '次月底返'
                    : record.commissionRule == 2
                    ? '月月返'
                    : '- - -'
                }}
              </a-space>
            </template>
            <template v-if="item.key === 'name'" #cell="{ record }">
              <div style="display: flex">
                <a-image
                  style="width: 40px; height: 40px"
                  :src="reSetImage(record.img[0])"
                  fit="contain"
                  alt=""
                  :preview="false"
                  @click="openImg(record)"
                />
                <div
                  style="
                    margin-left: 10px;
                    width: 170px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                >
                  <div
                    style="
                      line-height: 20px;
                      font-size: 12px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                    >{{ record.name }}</div
                  >
                  <div
                    style="
                      color: #86909c;
                      line-height: 20px;
                      font-size: 10px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                    >{{ record.shortIntroduce }}</div
                  >
                </div>
              </div>
            </template>
            <template v-if="item.key === 'mallCost'" #cell="{ record }">
              <span v-if="record.mallUser">
                {{ record.mallUser.cost }}
              </span>
              <span v-else> 未分润</span>
            </template>
            <template v-if="item.key === 'mallPrice'" #cell="{ record }">
              <span v-if="record.mallUser">
                {{ record.mallUser.price }}
              </span>
              <span v-else> 未分润</span>
            </template>
            <template v-if="item.key === 'mallProfit'" #cell="{ record }">
              <span v-if="record.mallUser">
                {{ Math.floor((record.mallUser.cost - record.cost) * 100) / 100 }} +
                {{ Math.floor((record.commission - record.mallUser.commission) * 100) / 100 }}
              </span>
              <span v-else>未分润</span>
            </template>
            <template v-if="item.key === 'commission1'" #cell="{ record }">
              <span>
                {{ record.commission }}
              </span>
            </template>
            <template v-if="item.key === 'commission'" #cell="{ record }">
              <span v-if="record.mallUser">
                {{ record.mallUser.commission }}
              </span>
              <span v-else> 未分润</span>
            </template>
            <template v-if="item.key === 'state'" #cell="{ record }">
              <span v-if="record.runState == 1" style="color: #3491fa"> 已分润 </span>
              <span v-else style="color: red"> 未分润</span>
            </template>

            <template v-if="item.key === 'actions'" #cell="{ record }">
              <div style="width: 168px; display: flex; flex-wrap: wrap">
                <a-button class="list-button" type="text" size="small" @click="openProfit(record)"
                  >编辑</a-button
                >
                <a-button
                  class="list-button"
                  type="text"
                  size="small"
                  @click="onDeleteItemSB(record)"
                  >回收</a-button
                >
              </div>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <TableFooter :pagination="paginationGoodProfit" position="center" />
      <template #footer>
        <div style="display: flex; justify-content: space-between; width: 100%">
          <div></div>
          <a-space>
            <a-select :style="{ width: '200px' }" v-model="profitType" allow-clear>
              <a-option :value="0">百分比分润</a-option>
              <a-option :value="1">金额分润</a-option>
            </a-select>
            <a-input-number
              hide-button
              :style="{ width: '320px' }"
              v-model="profitNum"
              placeholder="请输入分润比例"
              allow-clear
            >
              <template #append>
                <a-button type="primary" status="success" @click="mathProfit">辅助计算</a-button>
              </template>
            </a-input-number>
            <a-button type="primary" style="margin-left: 12px" @click="allProfit"
              >确认分润</a-button
            >
          </a-space>
        </div>
      </template>
    </a-modal>
    <!-- 编辑分润 -->
    <a-modal
      v-model:visible="profitVisible"
      @before-close="handleCancelProfit"
      title="编辑分润"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="profitRef" :auto-label-width="true" :model="profitInfo">
        <a-form-item
          label="商品成本"
          field="cost"
          :rules="[{ required: true, message: '商品成本不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input-number v-model="profitInfo.cost" placeholder="请输入商品成本" allow-clear />
        </a-form-item>
        <a-form-item
          label="商品售价"
          field="price"
          :rules="[{ required: true, message: '商品售价不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input-number v-model="profitInfo.price" placeholder="请输入商品售价" allow-clear />
        </a-form-item>
        <a-form-item
          v-if="profitInfo.type != 2"
          field="commission"
          label="客户佣金"
          :rules="[{ required: true, message: '客户佣金不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input-number
            v-model="profitInfo.commission"
            placeholder="请输入客户佣金"
            allow-clear
          />
        </a-form-item>
        <div v-else>
          <a-form-item
            v-for="(item, index) in profitInfo.everyMonthCommission"
            :key="index"
            field="commission"
            :label="'第' + item.month + '月'"
          >
            <a-input-number v-model="item.commission" placeholder="请输入客户佣金" allow-clear />
          </a-form-item>
        </div>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelProfit">取消</a-button>
          <a-button type="primary" @click="handleBeforeProfit">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 商品图片展示 -->
    <a-image-preview-group
      v-model:visible="imgShow"
      :default-current="0"
      infinite
      :srcList="imgArray"
    />
  </div>
</template>

<script lang="ts" setup>
  import useCommonStore from '@/store/modules/common'
  import * as http from '@/api/http'
  import {
    getUserUserList,
    addUserUser,
    UpdateUserUser,
    exportUserUser,
    getUserProfitList,
    postOrderly,
    postDisOrder,
    postOrderlyCheck,
    postDisOrderCheck,
    setFenrun,
    recovery,
    userdetect,
    userStatistics,
  } from '@/api/user'
  import { outLineUsers, userBalance, setUserYj, changePass, changeUserState } from '@/api/url'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { Form, Message, Modal } from '@arco-design/web-vue'
  import { onMounted, reactive, ref, watch } from 'vue'
  import md5 from 'js-md5'
  import { formpost } from '@/api/http'
  import { reSetImage } from '@/api/imageNiu'
  function changeStockSeachs() {
    goodProfitFN(1)
  }
  //展示图片
  const imgShow = ref(false)
  const imgArray: any = ref([])
  function openImg(val: any) {
    imgArray.value = JSON.parse(JSON.stringify(val.img))
    imgArray.value.forEach((item: any, index: any) => {
      imgArray.value[index] = reSetImage(item)
    })
    imgShow.value = true
  }
  function selecFn(val: any) {
    fuzhufenrunlist111.value = val
  }
  const profitType = ref(0)
  // 计算单个月佣金的函数
  function calculateMonthlyCommission(commission: number, profitNum: number, profitType: number) {
    if (profitType === 0) {
      if (commission > 0) {
        return commission - Math.floor(commission * (profitNum / 100) * 100) / 100 > 0
          ? commission - Math.floor(commission * (profitNum / 100) * 100) / 100
          : 0
      } else {
        return 0
      }
    } else {
      if (commission > 0) {
        return Math.floor((commission - profitNum) * 100) / 100 > 0
          ? Math.floor((commission - profitNum) * 100) / 100
          : 0
      } else {
        return 0
      }
    }
  }

  // 计算总成本的函数
  function calculateTotalCost(cost: any, profitNum: number, profitType: number) {
    if (profitType === 0) {
      return cost.price - Math.floor(cost.price * (profitNum / 100) * 100) / 100
    }
    return Math.floor((cost.cost + profitNum) * 100) / 100
  }

  // 计算总佣金的函数
  function calculateTotalCommission(item: any, profitNum: number, profitType: number) {
    if (item.commissionRule === 2) {
      let total = 0
      item.everyMonthCommission.forEach((items: any) => {
        total += calculateMonthlyCommission(items.commission, profitNum, profitType)
      })
      return total
    }
    return calculateMonthlyCommission(item.commission, profitNum, profitType)
  }

  // 生成每月佣金列表的函数
  function generateMonthlyCommissionList(item: any, profitNum: number, profitType: number) {
    if (item.commissionRule === 2) {
      return item.everyMonthCommission.map((items: any) => ({
        month: items.month,
        commission: calculateMonthlyCommission(items.commission, profitNum, profitType),
      }))
    }
    return []
  }
  //辅助计算
  function mathProfit() {
    mathArray.value = []
    // 主逻辑循环
    goodProfitList.value.forEach((item: any) => {
      fuzhufenrunlist111.value.forEach((val: any) => {
        if (val === item.id) {
          console.log(profitNum.value / 100)
          const totalCost = calculateTotalCost(item, profitNum.value, profitType.value)
          const totalCommission = calculateTotalCommission(item, profitNum.value, profitType.value)
          const monthlyCommissionList = generateMonthlyCommissionList(
            item,
            profitNum.value,
            profitType.value
          )
          item.mallUser = {
            cost: totalCost,
            price: totalCost >= item.price ? totalCost : item.price,
            commission: totalCommission,
            everyMonthCommission: monthlyCommissionList,
            mallId: item.id,
          }
          mathArray.value.push(item.mallUser)
        }
      })
    })
  }
  //批量分润
  function allProfit() {
    if (fuzhufenrunlist111.value.length > 0) {
      const list: any = []
      fuzhufenrunlist111.value.forEach((val: any) => {
        mathArray.value.forEach((vals: any) => {
          if (val == vals.mallId) {
            list.push(vals)
          }
        })
      })
      http
        .post({
          url: '/app/mall/user/profit/sharing?userId=' + goodProfitInfo.value.userId,
          data: list,
        })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            goodProfitFN()
            mathArray.value = []
            profitVisible.value = false
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    } else {
      Message.error('请先输入比例进行辅助计算后，再执行此操作')
    }
  }
  //商品回收佣金
  const onDeleteItemSB = (item: any) => {
    Modal.warning({
      title: '操作提示',
      titleAlign: 'start',
      content: '确定要回收佣金？',
      hideCancel: false,
      onOk() {
        formpost({
          url: '/app/mall/user/recovery/profit/sharing',
          data: { mallIdList: item.id, userId: goodProfitInfo.value.userId },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            goodProfitFN()
          }
        })
      },
    })
  }
  //编辑分润
  const profitVisible = ref(false)
  const profitRef = ref()
  const profitInfo: any = ref({
    mallId: '',
    cost: '',
    price: '',
    commission: '',
  })
  function openProfit(val: any) {
    profitInfo.value.type = val.commissionRule
    if (val.mallUser) {
      profitInfo.value.cost = val.mallUser.cost
      profitInfo.value.price = val.mallUser.price
      profitInfo.value.mallId = val.id
      profitInfo.value.commission = val.mallUser.commission
      profitInfo.value.everyMonthCommission = val.mallUser.everyMonthCommission
    } else {
      profitInfo.value.cost = val.cost
      profitInfo.value.price = val.price
      profitInfo.value.mallId = val.id
      profitInfo.value.commission = val.commission
      profitInfo.value.everyMonthCommission = val.everyMonthCommission
    }
    profitVisible.value = true
  }
  function handleCancelProfit() {
    mathArray.value = []
    profitVisible.value = false
  }
  function handleBeforeProfit() {
    profitRef.value?.validate().then((error: any) => {
      if (!error) {
        http
          .post({
            url: '/app/mall/user/profit/sharing?userId=' + goodProfitInfo.value.userId,
            data: [profitInfo.value],
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              goodProfitFN()
              mathArray.value = []
              profitVisible.value = false
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      }
    })
  }
  //商品分润
  const paginationGoodProfit = usePagination(goodProfitFN)
  const goodProfitVisible = ref(false)
  const goodProfitLoading = ref(false)
  const goodProfitList = ref([])
  const profitNum = ref('')
  const goodProfitInfo = ref({
    userId: '',
    classId: '',
    profitSharing: '',
    mallName: '',
    operatorId: '',
    commissionRule: '',
    channelId: '',
  })
  const classLists: any = ref([])
  function classListFn() {
    http
      .get({
        url: '/app/mall/class/list',
      })
      .then((res: any) => {
        classLists.value = res.data
      })
  }
  const mathArray: any = ref([])
  const fuzhufenrunlist111 = ref([])
  function openGoodProfit(val: any) {
    classListFn()
    fuzhufenrunlist111.value = []
    goodProfitInfo.value.userId = val.id
    mathArray.value = []
    profitNum.value = ''
    goodAllListFn()
    goodProfitFN(1)
    goodProfitVisible.value = true
  }
  function goodProfitFN(val?: any) {
    goodProfitLoading.value = true
    if (val) {
      paginationGoodProfit.page = val
    }
    http
      .get({
        url: '/app/mall/user/profit/sharing/list',
        data: {
          page: paginationGoodProfit.page,
          size: paginationGoodProfit.pageSize,
          ...goodProfitInfo.value,
        },
      })
      .then((res: any) => {
        goodProfitLoading.value = false
        res.data.list.forEach((item: any) => {
          if (item.mallUser) {
            item.runState = 1
          } else {
            item.runState = 0
          }
        })
        goodProfitList.value = res.data.list
        paginationGoodProfit.setTotalSize((res.data as any).totalSize)
      })
  }
  const goodProfitTableList = ref([
    {
      title: '商品名称',
      key: 'name',
      dataIndex: 'name',
      checked: true,
      width: 250,
    },
    {
      title: '商品售价',
      key: 'price',
      dataIndex: 'price',
      checked: true,
      width: 100,
    },
    {
      title: '客户成本',
      key: 'mallCost',
      dataIndex: 'mallCost',
      checked: true,
      width: 100,
    },
    {
      title: '商品佣金',
      key: 'commission1',
      dataIndex: 'commission1',
      checked: true,
      width: 100,
    },
    {
      title: '商品成本',
      key: 'cost',
      dataIndex: 'cost',
      checked: true,
      width: 100,
    },
    {
      title: '客户售价',
      key: 'mallPrice',
      dataIndex: 'mallPrice',
      checked: true,
      width: 100,
    },

    {
      title: '客户佣金',
      key: 'commission',
      dataIndex: 'commission',
      checked: true,
      width: 100,
    },
    {
      title: '我的利润',
      key: 'mallProfit',
      dataIndex: 'mallProfit',
      checked: true,
      width: 100,
    },
    {
      title: '佣金规则',
      key: 'commissionRule',
      dataIndex: 'commissionRule',
      checked: true,
      width: 100,
    },
    {
      title: '分润状态',
      key: 'state',
      dataIndex: 'state',
      checked: true,
      width: 100,
    },

    {
      title: '操作',
      key: 'actions',
      fixed: 'right',
      dataIndex: 'actions',
      width: 120,
      align: 'left',
      checked: true,
    },
  ])
  const goodAllList: any = ref([])
  function goodAllListFn() {
    useCommon.userMallFn().then((res) => {
      goodAllList.value = res.data
    })
  }

  const useCommon = useCommonStore()
  const table = useTable()
  const pagination = usePagination(doRefresh)
  const pagination2 = usePagination(getFenruns)
  const rowKey = useRowKey('id')
  const visible = ref(false)
  const visibleEdit = ref(false)
  const balancevisible = ref(false)
  const btnLoading = ref(false)
  const ziliaovisible = ref(false)
  const loadingziliao = ref(false)
  const warvisible = ref(false)
  const updateFenrunisible = ref(false)
  const passvisible = ref(false)
  const statevisible = ref(false)
  const shebeivisible = ref(false)
  const huakavisible = ref(false)
  const jiancevisible = ref(false)
  const classLoading = ref(false)
  const fenrunvisible = ref(false)
  const userForm = ref<typeof Form>()
  const setForms = ref<typeof Form>()
  const userFormEdit = ref<typeof Form>()
  const passForms = ref<typeof Form>()
  const balanceForms = ref<typeof Form>()
  const huakaForms = ref<typeof Form>()
  const checked1: any = ref('orderly')
  const jianceForm: any = ref({})
  const channel: any = ref([])
  const series: any = ref([])
  const checkFenrunType: any = ref(0)
  const type0Num: any = ref(0)
  const gexingFenrunType: any = ref(0)

  const fenrunUpdateForm: any = ref({
    setMealId: '', //套餐ID
    cost: '', //套餐成本
    price: '', //套餐售价
    close: true, //状态true关闭,  false正常
  })
  const huakaForm: any = reactive({
    addCard: '',
    endCard: '',
    remarks: '',
    userId: '',
    cardMultiline: '',
  })
  const stateForm = reactive({
    id: '',
    state: '',
  })
  const form = reactive({
    userName: '',
    state: '',
    addTime: '',
    endTime: '',
    realName: '',
    warningState: '',
    addBalance: '',
    endBalance: '',
  })
  const fenrunForm: any = reactive({
    channelId: '',
    seriesId: '',
    type: '',
    userId: '',
    profit: 0,
  })
  const subForm = reactive({
    passWordmd5: '',
    userName: '', //用户名
    passWord: '', //登录密码(如果为空为默认密码123456)
    profit: '', //分润比例
  })
  const passForm = reactive({
    id: '',
    passWord: '',
    passWordmd5: '',
  })
  const warForm = reactive({
    warningBalance: 0,
    warningPhone: '',
    id: '',
  })
  const subFormEdit = ref({
    userName: '', //用户名
    profit: '', //分润比例
  })
  const banlanceForm: any = reactive({
    type: '0',
    balance: 0,
    remarks: '',
  })
  const userInfos: any = ref({})
  const tableColumnsfenrunList = reactive({
    list: [
      {
        title: '套餐名称',
        key: 'name',
        dataIndex: 'name',
        checked: true,
        align: 'left',
        width: 200,
      },
      {
        title: '系统成本',
        key: 'cost',
        dataIndex: 'cost',
        checked: true,
        width: 100,
        align: 'left',
      },
      {
        title: '系统售价',
        key: 'price',
        dataIndex: 'price',
        checked: true,
        width: 100,
        align: 'left',
      },
      {
        title: '客户成本',
        key: 'usercost',
        dataIndex: 'usercost',
        checked: true,
        width: 100,
        align: 'left',
      },
      {
        title: '客户售价',
        key: 'userprice',
        dataIndex: 'userprice',
        checked: true,
        width: 100,
        align: 'left',
      },
      {
        title: '套餐状态',
        key: 'close',
        dataIndex: 'close',
        checked: true,
        width: 120,
        align: 'left',
      },
      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        checked: true,
        width: 120,
        align: 'left',
      },
    ],
  })
  const table2: any = reactive({
    dataList: [],
  })
  const tableColumns: any = reactive({
    list: [
      {
        title: '客户账号',
        key: 'userName',
        dataIndex: 'userName',
        checked: true,
        width: 220,
      },
      {
        title: '账户余额',
        key: 'balance',
        dataIndex: 'balance',
        checked: true,
        width: 120,
      },
      {
        title: '卡板总数',
        key: 'total',
        dataIndex: 'total',
        checked: true,
        width: 120,
      },
      {
        title: '激活总数',
        key: 'activation',
        dataIndex: 'activation',
        checked: true,
        width: 120,
      },
      {
        title: '激活比例',
        key: 'print',
        dataIndex: 'print',
        checked: true,
        width: 100,
      },
      // {
      //   title: '在线设备',
      //   key: 'sessions',
      //   dataIndex: 'sessions',
      //   checked: true,
      //   width: 100,
      // },
      {
        title: '账户实名',
        key: 'userRealName',
        dataIndex: 'userRealName',
        checked: true,
        width: 100,
      },
      {
        title: '余额预警',
        key: 'warningBalance',
        dataIndex: 'warningBalance',
        checked: true,
        width: 100,
      },

      {
        title: '状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
        checked: true,
        width: 190,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 200,
        align: 'left',
        checked: true,
      },
    ],
  })
  const sessionColumns = [
    {
      width: 130,
      title: '登录IP',
      key: 'ip',
      dataIndex: 'ip',
    },
    {
      width: 100,
      title: '登录地址',
      key: 'address',
      dataIndex: 'address',
    },
    {
      width: 120,
      key: 'operatingSystem',
      title: '操作系统',
      dataIndex: 'operatingSystem',
    },
    { width: 100, key: 'browser', title: '浏览器', dataIndex: 'browser' },
    {
      width: 190,
      key: 'loginTime',
      title: '登录时间',
      dataIndex: 'loginTime',
    },
    {
      width: 190,
      key: 'lastAccessedTime',
      title: '最后访问',
      dataIndex: 'loginTime',
    },
    {
      width: 180,
      key: 'time',
      title: '在线时长',
      dataIndex: 'time',
    },
    {
      title: '操作',
      key: 'actions',
      dataIndex: 'actions',
      width: 80,
      align: 'left',
    },
  ]
  const sessionList: any = ref([])
  // const state = ref([
  //   {
  //     id: 1,
  //     name: '全部客户',
  //     img: '',
  //     number: 20000,
  //     introduce: '',
  //   },
  //   {
  //     id: 2,
  //     name: '活跃客户',
  //     img: '',
  //     number: 20000,
  //     introduce: '最近30天产生过订单的客户',
  //   },
  //   {
  //     id: 3,
  //     name: '新增客户',
  //     img: '',
  //     number: 10000,
  //     introduce: '最近30天新增并且产生订单记录的客户',
  //   },
  //   {
  //     id: 4,
  //     name: '冻结客户',
  //     img: '',
  //     number: 10000,
  //     introduce: '冻结状态的客户',
  //   },
  //   {
  //     id: 5,
  //     name: '流失客户',
  //     img: '',
  //     number: 10000,
  //     introduce: '近90天产生过订单的客户;近30天未产生过订单的客户',
  //   },
  // ])
  const tableLoading = ref(false)
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const aaaas = ref(false)
  const userZong: any = ref({})
  function userdetectFn() {
    http
      .formpost({
        url: userdetect,
        data: () => {
          return { userName: subForm.userName }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          aaaas.value = true
          userZong.value = res.data
        }
      })
  }
  function clickSj() {
    let code = ''
    let characters = 'abcdefghijklmnopqrstuvwxyz'
    characters += '0123456789'
    for (let i = 0; i < 8; i++) {
      code += characters.charAt(Math.floor(Math.random() * characters.length))
    }
    subForm.passWordmd5 = code //把code值赋给data中定义好的password
  }
  function showAdd() {
    visible.value = true
  }
  function handleCancel() {
    userForm.value?.resetFields()
    visible.value = false
  }
  function handleCancelhuaka() {
    huakaForms.value?.resetFields()
    huakavisible.value = false
  }
  function handleCancelEdit() {
    userFormEdit.value?.resetFields()
    visibleEdit.value = false
  }
  const handleCancelWar = () => {
    setForms.value?.resetFields()
    warvisible.value = false
  }
  const updateFenrunForms = ref<typeof Form>()
  const handleCancelUpdateFenrun = () => {
    updateFenrunForms.value?.resetFields()
    updateFenrunisible.value = false
  }
  const handleCancelPass = () => {
    passForms.value?.resetFields()
    passvisible.value = false
  }
  const handleCancelstate = () => {
    statevisible.value = false
  }
  function getchannel() {
    useCommon.getchannelList().then((res: any) => {
      channel.value = res.data
    })
  }
  function getseries() {
    useCommon.userseriess().then((res: any) => {
      series.value = res.data
    })
  }
  const submitUpdateFenrun = () => {
    updateFenrunForms.value?.validate().then((error: any) => {
      if (!error) {
        let a = []
        a.push(fenrunUpdateForm.value)
        console.log(a)
        fenrunSubmit(a)
      } else {
        console.log(1111)
      }
    })
  }
  const fenrunSubmit = (item: any) => {
    if (item.length <= 0) {
      return false
    }
    http
      .post({
        url: setFenrun + '?userId=' + fenrunForm.userId,
        data: () => {
          return item
        },
      })
      .then((res) => {
        if (res.code == 0) {
          Message.success(res.msg)
          updateFenrunisible.value = false
          updateFenrunForms.value?.resetFields()
          getFenruns()
        }
      })
  }
  const handleBeforeOkhuakas = () => {
    huakaForms.value?.validate().then((error: any) => {
      if (!error) {
        if (checked1.value == 'disOrder') {
          http
            .formpost({
              url: postDisOrderCheck,
              data: () => {
                return {
                  userId: huakaForm.userId,
                  remarks: huakaForm.remarks,
                  cardMultiline: huakaForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                jianceForm.value = res.data
                jiancevisible.value = true
              }
            })
        } else {
          http
            .post({
              url: postOrderlyCheck + '?userId=' + huakaForm.userId,
              data: () => {
                return {
                  addCard: huakaForm.addCard,
                  endCard: huakaForm.endCard,
                  remarks: huakaForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                jianceForm.value = res.data
                jiancevisible.value = true
              }
            })
        }
      }
    })
  }
  const handleBeforeOkhuaka = () => {
    huakaForms.value?.validate().then((error: any) => {
      if (!error) {
        if (checked1.value == 'disOrder') {
          http
            .formpost({
              url: postDisOrder,
              data: () => {
                return {
                  userId: huakaForm.userId,
                  remarks: huakaForm.remarks,
                  cardMultiline: huakaForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                huakaForms.value?.resetFields()
                jianceForm.value = res.data
                jiancevisible.value = true
                doRefresh()
              }
            })
        } else {
          http
            .post({
              url: postOrderly + '?userId=' + huakaForm.userId,
              data: () => {
                return {
                  addCard: huakaForm.addCard,
                  endCard: huakaForm.endCard,
                  remarks: huakaForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                huakaForms.value?.resetFields()
                jianceForm.value = res.data
                jiancevisible.value = true
                doRefresh()
              }
            })
        }
      }
    })
  }
  const handleBeforeOkPass = () => {
    passForms.value?.validate().then((error: any) => {
      if (!error) {
        passForm.passWord = md5(passForm.passWordmd5)
        http
          .formpost({
            url: changePass,
            data: () => {
              return {
                ...passForm,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              passvisible.value = false
              passForms.value?.resetFields()
              doRefresh()
            } else {
              Message.error(res.msg)
            }
            console.log(res)
          })
      }
    })
  }
  const handleCancelBan = () => {
    balanceForms.value?.resetFields()
    balancevisible.value = false
  }
  const handleCancelZiliao = () => {
    ziliaovisible.value = false
  }
  const handleCancelsb = () => {
    shebeivisible.value = false
  }
  const ouLine = (item: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要下线此设备吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        http
          .get({
            url: outLineUsers,
            data: () => {
              return {
                session: item.session,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              let id1 = sessionList.value.findIndex((items: any) => {
                if (items.id == item.id) {
                  return true
                }
              })
              sessionList.value.splice(id1, 1)
              Message.success(res.msg)
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      },
    })
  }
  const handleBeforeOkWar = () => {
    setForms.value?.validate().then((error: any) => {
      if (!error) {
        http
          .get({
            url: setUserYj,
            data: () => {
              return {
                ...warForm,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              warvisible.value = false
              setForms.value?.resetFields()
              doRefresh()
            } else {
              Message.error(res.msg)
            }
            console.log(res)
          })
      }
    })
  }
  const serchForm = ref()
  const resetSeach = () => {
    serchForm.value.resetFields()
    form.addBalance = ''
    form.endBalance = ''
    doRefresh(1)
  }
  const serchForm2 = ref()

  const clickT = (item: any) => {
    sessionList.value = item
    shebeivisible.value = true
  }
  const delimitation = (item: any) => {
    console.log(item)
    huakaForm.userId = item.id
    huakavisible.value = true
  }
  function handleBeforeOkstate() {
    http
      .get({
        url: changeUserState,
        data: () => {
          return {
            ...stateForm,
          }
        },
      })
      .then((res) => {
        btnLoading.value = false
        if (res.code == 0) {
          Message.success(res.msg)
          statevisible.value = false
          doRefresh()
        } else {
          Message.error(res.msg)
        }
      })
  }
  // const handleBeforeOkBansb = () => {
  //   shebeivisible.value = false
  //   doRefresh()
  // }
  function handleBeforeOkBan() {
    balanceForms.value?.validate().then((error: any) => {
      if (!error) {
        btnLoading.value = true
        http
          .formpost({
            url: userBalance,
            data: () => {
              return {
                ...banlanceForm,
              }
            },
          })
          .then((res) => {
            btnLoading.value = false
            if (res.code == 0) {
              Message.success(res.msg)
              balancevisible.value = false
              balanceForms.value?.resetFields()
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      } else {
        console.log(btnLoading.value)
      }
    })
  }
  // function updatUserPop(item: any) {
  //   subFormEdit.value = JSON.parse(JSON.stringify(item))
  //   visibleEdit.value = true
  // }
  function showfenrun(item: any) {
    // return false
    fenrunForm.userId = item.id
    fuzhufenrunlist.value = []
    type0Num.value = 0
    gexingFenrunType.value = 0
    fenrunvisible.value = true
    getFenruns()
  }
  function resetFenrun(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定回收这个分润吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '删除',
      onOk: () => {
        http
          .get({
            url: recovery,
            data: () => {
              return {
                userId: fenrunForm.userId,
                setMealId: item.id,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              getFenruns()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      },
    })
  }
  function showUpdateFenrun(item: any) {
    if (item.setMealUser)
      fenrunUpdateForm.value = {
        setMealId: item.id, //套餐ID
        cost: item.setMealUser.cost, //套餐成本
        price: item.setMealUser.price, //套餐售价
        close: item.setMealUser.close, //状态true关闭,  false正常
      }
    else
      fenrunUpdateForm.value = {
        setMealId: item.id, //套餐ID
        cost: '', //套餐成本
        price: '', //套餐售价
        close: false, //状态true关闭,  false正常
      }
    console.log(fenrunUpdateForm.value)
    updateFenrunisible.value = true
  }
  // 监听对象
  watch(
    () => fenrunForm,
    () => {
      getFenruns(1)
    },
    {
      deep: true, // 深度监听的参数
    }
  )
  function getFenruns(value?: any) {
    classLoading.value = true
    if (value) {
      pagination2.page = value
    }
    http
      .get({
        url: getUserProfitList,
        data: () => {
          return {
            page: pagination2.page,
            pageSize: pagination2.pageSize,
            ...fenrunForm,
          }
        },
      })
      .then((res) => {
        classLoading.value = false
        table2.dataList = res.data.list
        pagination2.setTotalSize((res.data as any).totalSize)
      })
      .catch(console.log)
  }
  const fuzhufenrunlist: any = ref([])
  function changeType() {
    fuzhufenrunlist.value = []
    type0Num.value = 0
  }
  function fuzhuClick() {
    fuzhufenrunlist.value = []
    if (type0Num.value == undefined || type0Num.value == 0) return false
    table2.dataList.forEach((item1: any) => {
      if (checkFenrunType.value == 0) {
        if (item1.setMealUser) {
          item1.setMealUser.cost = Number(
            (item1.price - Math.floor(item1.price * (type0Num.value / 100) * 100) / 100).toFixed(2)
          )
          if (item1.setMealUser.price < item1.setMealUser.cost) {
            item1.setMealUser.price = item1.price
          }
        } else {
          item1.setMealUser = {
            cost: Number(
              (item1.price - Math.floor(item1.price * (type0Num.value / 100) * 100) / 100).toFixed(
                2
              )
            ), //套餐成本
            price: item1.price, //套餐售价
            close: false, //状态true关闭,  false正常
          }
          console.log(item1)
        }
        fuzhufenrunlist.value.push({
          setMealId: item1.id, //套餐ID
          cost: item1.setMealUser.cost, //套餐成本
          price: item1.setMealUser.price, //套餐售价
          close: false, //状态true关闭,  false正常
        })
      } else {
        console.log(item1)
        if (gexingFenrunType.value == 0) {
          if (item1.setMealUser) {
            item1.setMealUser.cost = item1.cost + type0Num.value
            if (item1.setMealUser.price < item1.setMealUser.cost) {
              item1.setMealUser.price = item1.setMealUser.cost
            }
          } else {
            item1.setMealUser = {
              cost: item1.cost + type0Num.value, //套餐成本
              price: item1.cost + type0Num.value, //套餐售价
              close: false, //状态true关闭,  false正常
            }
            console.log(item1)
          }
          fuzhufenrunlist.value.push({
            setMealId: item1.id, //套餐ID
            cost: item1.setMealUser.cost, //套餐成本
            price: item1.setMealUser.price, //套餐售价
            close: false, //状态true关闭,  false正常
          })
        } else if (gexingFenrunType.value == 1) {
          if (item1.setMealUser) {
            item1.setMealUser.cost = item1.price - type0Num.value
            if (item1.setMealUser.price < item1.setMealUser.cost) {
              item1.setMealUser.price = item1.setMealUser.cost
            }
          } else {
            item1.setMealUser = {
              cost: item1.price - type0Num.value, //套餐成本
              price: item1.price - type0Num.value, //套餐售价
              close: false, //状态true关闭,  false正常
            }
            console.log(item1)
          }
          fuzhufenrunlist.value.push({
            setMealId: item1.id, //套餐ID
            cost: item1.setMealUser.cost, //套餐成本
            price: item1.setMealUser.price, //套餐售价
            close: false, //状态true关闭,  false正常
          })
        } else if (gexingFenrunType.value == 2) {
          if (item1.setMealUser) {
            item1.setMealUser.cost = item1.setMealUser.cost + type0Num.value
            if (item1.setMealUser.price < item1.setMealUser.cost) {
              item1.setMealUser.price = item1.setMealUser.cost
            }
          }
          fuzhufenrunlist.value.push({
            setMealId: item1.id, //套餐ID
            cost: item1.setMealUser.cost, //套餐成本
            price: item1.setMealUser.price, //套餐售价
            close: false, //状态true关闭,  false正常
          })
        }
      }
    })
    // setTimeout(() => {

    // }, 1000);
    console.log(fuzhufenrunlist.value, table2.dataList, type0Num)
  }
  function submitFenrunList() {
    fenrunSubmit(fuzhufenrunlist.value)
  }
  function handleBeforeOkEdit() {
    console.log(subFormEdit.value)
    userFormEdit.value?.validate().then((error: any) => {
      if (!error) {
        btnLoading.value = true
        http
          .post({
            url: UpdateUserUser,
            data: () => {
              return {
                ...subFormEdit.value,
              }
            },
          })
          .then((res) => {
            btnLoading.value = false
            if (res.code == 0) {
              Message.success(res.msg)
              visibleEdit.value = false
              userFormEdit.value?.resetFields()
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      } else {
        console.log(btnLoading.value)
      }
    })
  }
  function handleBeforeOk() {
    userForm.value?.validate().then((error: any) => {
      if (!error) {
        btnLoading.value = true
        if (subForm.passWordmd5 != '') {
          subForm.passWord = md5(subForm.passWordmd5)
        }
        http
          .post({
            url: addUserUser,
            data: () => {
              return {
                ...subForm,
              }
            },
          })
          .then((res) => {
            btnLoading.value = false
            if (res.code == 0) {
              Message.success(res.msg)
              visible.value = false
              userForm.value?.resetFields()
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      } else {
        console.log(btnLoading.value)
      }
    })
  }
  const totals: any = ref({
    amount: 0,
    card_activation: 0,
    card_total: 0,
  })
  function userStatisticsFn() {
    http
      .get({
        url: userStatistics,
        data: () => {
          return {
            ...form,
          }
        },
      })
      .then((res) => {
        if (res.data.card_activation) {
          totals.value = res.data
        } else {
          res.data.card_activation = 0
          totals.value = res.data
        }
      })
  }
  function doRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    tableLoading.value = true
    if (value) {
      pagination.page = value
    }
    http
      .get({
        url: getUserUserList,
        data: () => {
          return {
            page: pagination.page,
            size: pagination.pageSize,
            ...form,
          }
        },
      })
      .then((res) => {
        tableLoading.value = false
        table.handleSuccess(res.data.list)
        pagination.setTotalSize((res.data as any).totalSize)
        userStatisticsFn()
      })
      .catch(console.log)
  }

  const onUpdateBorder = (isBordered: boolean) => {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }
  function rowClassNameFun(_record: any, index: number) {
    return index % 2 === 1 && table.striped.value ? 'table-striped' : null
  }
  const loading = ref(false)
  const exportDepartments = () => {
    loading.value = true
    useCommon
      .downLoads(exportUserUser, form, '客户列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  onMounted(() => {
    doRefresh()
    getchannel()
    getseries()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 8px;
    background: none !important;
  }
  .top {
    margin-bottom: 20px;
    background-color: var(--color-bg-1);
    border-radius: 10px;

    .box {
      display: flex;
      align-items: center;
      height: 30px;
      margin: 5px 10px;

      .line {
        width: 5px;
        height: 25px;
        margin-right: 10px;
        background-color: #40a1ff;
      }

      .text {
        font-size: 16px;
        line-height: 25px;
        text-align: center;
      }
    }

    .flex {
      display: flex;
      justify-content: space-around;
      margin: 12px 7px;

      .dataBox:last-child {
        margin-right: 0px !important;
      }

      .dataBox {
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin-right: 20px;
        height: 150px;
        background-image: linear-gradient(rgb(var(--arcoblue-1)), #fff);
        border: 1px solid #f2f3f5;
        border-radius: 10px;

        .img {
          width: 70px;
          height: 70px;
          margin-right: 20px;
          border-radius: 50%;
        }

        .name {
          margin-top: 0;
        }

        .number {
          font-size: 22px;
        }
      }
    }
  }
  :deep(.arco-input-append) {
    padding: 0px;
  }
  .avatar-container {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    vertical-align: middle;

    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .avatar-vip {
      border: 2px solid #cece1e;
    }

    .vip {
      position: absolute;
      top: 0;
      right: -9px;
      width: 15px;
      transform: rotate(60deg);
    }
  }
  .huakaClass :deep(.arco-form-item-message) {
    margin-left: 42px !important;
  }
  .gender-container {
    .gender-icon {
      width: 20px;
    }
  }
</style>
<style scoped>
  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }
</style>
